<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>小马视频－基本组件的使用</title>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

</head>
<body>
    
    <div class="container" style="margin-top:30px;">
        
        <h3>input groups</h3>
        
        <div class="input-group">
          <span class="input-group-addon" id="basic-addon1">@</span>
          <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
        </div>
        <br/>
        <div class="input-group">
          <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
          <span class="input-group-addon" id="basic-addon2">@example.com</span>
        </div>
        <br/>
        <div class="input-group">
          <span class="input-group-addon">$</span>
          <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
          <span class="input-group-addon">.00</span>
        </div>
        <br/>
        <label for="basic-url">Your vanity URL</label>
        <div class="input-group">
          <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
          <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
        </div>
        
        
        <hr/>
        
        <h3>badge</h3>
        
        <a href="#">Inbox <span class="badge">42</span></a>

        <button class="btn btn-primary" type="button">
          Messages <span class="badge">4</span>
        </button>
        
        <hr/>
        
        <h3>alert</h3>
        
        <div class="alert alert-success" role="alert">alert-success</div>
        <div class="alert alert-info" role="alert">alert-info</div>
        <div class="alert alert-warning" role="alert">alert-warning</div>
        <div class="alert alert-danger" role="alert">alert-danger</div>
        
        <hr/>
        
        <h3>panel</h3>

        <div class="panel panel-info">
          <div class="panel-heading">
            <h3 class="panel-title">Panel title</h3>
          </div>
          <div class="panel-body">
            Panel content
              <p>AAAAHelo world.</p>
          </div>
          <div class="panel-footer">Panel footer</div>
        </div>
        
    </div>
    
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>    
</body>
</html>
<!--





-->